<template>
  <div>
    <el-page-header @back="goBack" content="编辑计划"></el-page-header>
    <div class="fromBox">
      <el-form ref="form" :model="form" label-width="130px">
        <el-form-item label="测评计划名称">
          <el-input type="text" placeholder="请输入内容" v-model="form.title" maxlength="30" show-word-limit > </el-input>
        </el-form-item>
        <el-form-item label="对学生展示的名称">
          <el-input type="text" placeholder="请输入内容" v-model="form.student_title" maxlength="30" show-word-limit > </el-input>
        </el-form-item>
        <el-form-item label="指导说明">
          <el-input type="textarea" placeholder="请输入内容" v-model="form.guidance_note" maxlength="1000" show-word-limit > </el-input>
        </el-form-item>
        <el-form-item label="类型设置">
          <el-select v-model="form.category" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="测评量表">
          <el-button type="primary" size="mini" @click="addMeasurementFn">添加测评</el-button>
          <simple-table :tableConfig="tableConfig" :tableData="tableData"></simple-table>
        </el-form-item>
        <el-form-item label="开始时间">
           <el-date-picker v-model="form.start_time" type="datetime" placeholder="选择日期时间"> </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker v-model="form.end_time" type="datetime" placeholder="选择日期时间"> </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" size="mini">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
    <add-measurement v-if="isAddMeasurement" :isAddMeasurement="this.isAddMeasurement" @noAddMeasurement="noAddMeasurement"></add-measurement>
  </div>
</template>
<script>
import {APIPLANGETPLANINFO, APIPLANEDITPLANINFO} from '@/common/api.js'
import addMeasurement from './addMeasurement.vue'
import simpleTable from '@/components/table.vue'
export default {
  components: {
    addMeasurement,
    simpleTable
  },
  data () {
    return {
      isAddMeasurement: false,
      form: {
        plan_id: '',
        title: '',
        student_title: '',
        start_time: '',
        end_time: '',
        guidance_note: '',
        category: '',
        plan_type: '', // 1--推荐组合2--自由组合3--量表
        public_ids: ''
      },
      options: [
        { value: 0, label: '全部' },
        { value: 1, label: '小学' },
        { value: 2, label: '中学' }
      ],
      tableConfig: {
        load: false,
        size: 'small', // 表格大小
        style: 'width:100%', // 表格宽度
        align: 'center',
        selection: false,
        border: true,
        config: [
          {name: '序号', type: 'index', width: '60px'},
          {id: 'title', name: '学校名称'},
          {id: 'number', name: '题量'},
          {id: 'summary', name: '简介'}
        ]
      },
      tableData: []
    }
  },
  created () {
    this.dataList()
  },
  methods: {
    dataList () {
      APIPLANGETPLANINFO({
        plan_id: this.$route.query.id
      }).then((res) => {
        this.form = res.data
        this.tableData = res.data.sub_list
        this.form.plan_id = this.$route.query.id
        this.form.public_ids = res.data.sub_list[0].id
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    goBack () {
      this.$router.push({path: '/plan'})
    },
    onSubmit () {
      var arr = []
      this.tableData.forEach(item => {
        arr.push(item.id)
      })
      this.form.public_ids = arr.toString()
      if (this.tableData.length > 1) {
        this.form.plan_type = 3
      } else {
        this.form.plan_type = 1
      }
      APIPLANEDITPLANINFO(this.form).then((res) => {
        this.$message.success(res.msg)
        this.$router.push({path: '/plan'})
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    addMeasurementFn () {
      this.isAddMeasurement = true
      this.tableData = []
    },
    noAddMeasurement (val) {
      this.isAddMeasurement = false
      // if (val.val.length !== 0) {
      //   this.form.public_ids = val.val.id
      //   this.tableData.push(val.val)
      // }
      this.tableData = val.val
    }
  }
}
</script>
